<template>
    <div>
        <Title :title="title"/>
        <div class="option">
            <div @click="gotolink" class="btn">
                <el-button type="primary">新增出行计划</el-button>
            </div>

            <div class="input">
                <el-input placeholder="请输入" suffix-icon="el-icon-search"/>
            </div>
        </div>
        <div class="content">
            <el-card>
                <div slot="header" class="clearfix">
                    <span>研学计划统计</span>
                </div>
                <StatisticsContent>
                    <div class="info-list">
                        <div class="item">
                            <div class="title">
                                计划出行次数
                            </div>
                            <div class="person-number">
                                12
                            </div>
                        </div>
                        <div class="item">
                            <div class="title">
                                计划出行次数
                            </div>
                            <div class="person-number">
                                12
                            </div>
                        </div>
                        <div class="item">
                            <div class="title">
                                计划出行次数
                            </div>
                            <div class="person-number">
                                12
                            </div>
                        </div>
                        <div class="item">
                            <div class="title">
                                计划出行次数
                            </div>
                            <div class="person-number">
                                12
                            </div>
                        </div>
                    </div>
                </StatisticsContent>
                <Chart/>
                <div class="list">
                    <List>
                        <template v-slot:item>
                            <Item>
                                <template v-slot:option>
                                    <div class="links">
                                        <div>
                                            <el-link type="primary">
                                                编辑
                                            </el-link>
                                        </div>
                                        <div>
                                            <el-link type="primary">
                                                出行申报
                                            </el-link>
                                        </div>
                                        <div>
                                            <el-link type="primary">
                                                |
                                            </el-link>
                                        </div>
                                        <div>
                                            <el-link type="primary">
                                                更多
                                                <i class="el-icon-arrow-down el-icon--right"></i>
                                            </el-link>
                                        </div>
                                    </div>

                                </template>
                            </Item>
                        </template>
                    </List>
                </div>
                <div class="pagination">
                    <Pagination/>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script>
    import Title from "@/components/title/Title";
    import List from "@/components/list/List";
    import Item from "@/components/list/item/Item";
    import Chart from "@/components/chart/Chart";
    import Pagination from "@/components/pagination/Pagination";
    import StatisticsContent from "@/components/statisticsContent/StatisticsContent";
    import {Card, Button, Input, Link,} from "element-ui";



    export default {
        name: "TermStudyPlan",
        components: {
            Title,
            List,
            Item,
            Chart,
            Pagination,
            StatisticsContent,
            "el-button": Button,
            "el-input": Input,
            "el-card": Card,
            "el-link": Link
        },

        data() {
            return {
                title:"学期研学计划"
            }
        },
        methods: {
            gotolink(){
                this.$router.push('/school/termStudyPlan/DetailsOfTravelDeclaration')
            }
        }
    }
</script>

<style scoped>
    .option div {
        display: inline-block;
        margin-top: 10px;
    }

    .input {
        width: 300px;
        margin-left: 900px;
    }

    .btn {
        margin-left: 30px;
    }

    .content {
        margin-top: 30px;
    }

    .info-list {
        display: flex;
        justify-content: space-around;
        margin-bottom: 10px;
    }

    .info-list .item .title {
        color: rgba(80, 80, 80, 1);
        font-size: 14px;
        line-height: 150%;
        text-align: center;
    }

    .info-list .item .person-number {
        color: rgba(80, 80, 80, 1);
        font-size: 28px;
        line-height: 150%;
        text-align: center;
    }

    .chart .title {
        text-indent: 20px;
        color: rgba(51, 51, 51, 1);
        background-color: rgba(255, 255, 255, 1);
        font-size: 18px;
        line-height: 150%;
        text-align: left;
        font-weight: bold;
        margin-bottom: -30px;
    }

    .chart {
        display: flex;
        justify-content: space-around;
    }
    .list{
        margin-top: 20px;
        margin-left: 60px;
    }
    .links{
        display: flex;
    }
    .links div{
        margin-left: 5px;
        margin-right: 5px;
    }
    .pagination{
        margin-left: 1000px;
    }
</style>
